<template>
    <div class="login_container">
        <div class="login_title">读者登录界面</div>

            <!-- 登录表单区域 -->
            <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="80px" class="login_form">
                <!-- 用户名 -->
                <el-form-item prop="username">
                    <el-input v-model="reader.username" type="text" placeholder="用户名"></el-input>
                </el-form-item>
                <!-- 密码 -->
                <el-form-item prop="password">
                    <el-input v-model="reader.password" type="password" placeholder="用户密码"></el-input>
                </el-form-item>
                <!-- 按钮区域 -->
                <el-form-item class="btns">
                    <el-button @click="login" type="primary">登录</el-button>
                    <el-button type="info" style="margin-left: 30px;margin-right: 30px">重置</el-button>
                    <el-button type="info" @click="register">读者注册</el-button>
                </el-form-item>
            </el-form>

    </div>
</template>

<script>
import axios from 'axios';
export default {
    name: "loginreader",
    data() {
        return {
            //登录表单
            loginForm: {
                username: "相思断红肠",
                password: "123456",
            },

            //登录表单规则的验证对象
            loginFormRules: {
                username: [
                    { required: true, message: "用户名不能为空", trigger: "blur" },
                    {
                        min: 3,
                        max: 20,
                        message: "长度在 3 到 20 个字符",
                        trigger: "blur",
                    },
                ],
                password: [
                    { required: true, message: "密码不能为空", trigger: "blur" },
                    {
                        min: 6,
                        max: 15,
                        message: "长度在 6 到 15 个字符",
                        trigger: "blur",
                    },
                ],
            },
            loginLoading: false,

        };
    },
    methods: {
        register(){
            alert('去注册');
        },
        login() {
            this.$refs.loginFormRef.validate(async (valid) => {
                // console.log(valid);
                //如果表单验证无效，直接返回
                if (!valid) {
                    return;
                }
                this.loginLoading = true;
                // 进行md5加密
                const salt = "xiaobaitiao";
                const username = this.loginForm.username;
                const password = this.loginForm.password;
                //向数据库发送axios请求，如果登录成功，就跳转
                const { data: res } = await this.$http.post(
                    "/reader/reader/login",
                    {
                        username,
                        password
                    }
                );
                if (res.status !== 200) {
                    this.loginLoading = false;
                    return this.$message.error(res.msg);
                }
                // console.log(res);
                this.$message.success("登录成功");
                this.loginLoading = false;
                window.sessionStorage.setItem("token", res.map.token);
                window.sessionStorage.setItem("userId", res.map.id);
                this.$router.push("/home"); //跳转到home页面下
            });
        },
        resetLoginForm() {
            this.$refs.loginFormRef.resetFields();
        },

        goUser() {
            this.$router.push("/login");
        },
        goManage() {
            this.$router.push("/loginmanage");
        },
    },
}
</script>

<style scoped>
*{
    margin: 0px;
    padding: 0px;
}

.btns {
    display: inline-block;
    justify-content: flex-end;
}

.login_container {
    background-image: url("../assets/images/login-background.jpg");
    background-size: cover;
    height: 99vh;
    width: 99vw;
    overflow: hidden;
}

.login_form {
    position: absolute;
    top: 40%;
    left: 50%;
    width: 350px;
    height: 250px;
    padding: 15px;
    margin-top: -110px;
    margin-left: -175px;
    background-color: #1ab394;
    border-radius: 20px;
    opacity: 0.40;
}

.login_title {
    color: #333333;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 30px;
}

</style>
